<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>@yield('title','文章')</title>
    <script src="{{asset('js/jquery-2.1.4.min.js')}}"></script>
    <script src="{{asset('js/bootstrap.min.js')}}"></script>
    <link href="{{asset('css/bootstrap.min.css')}}" rel="stylesheet">
    <link rel="stylesheet" href="{{asset('fonts/glyphicons-halflings-regular.eot')}}">
    <link rel="stylesheet" href="{{asset('css/home/article.css')}}">
</head>
<body>
<?php
        if (!empty(session('readid'))){
            $a=\App\Model\readuser::find(session('readid'));
            $cc=$a->backgroud;
            $ziti=$a->ziti;
        }
?>
@if(!empty(session('readid')))
<input type="hidden" value="{{$ziti}}" id="ziti">
<input type="hidden" value="{{$cc}}" id="backgroud">
@endif
<script>
    $(function () {
        (function(){
            $ziti=$('#ziti').val();
            $('#miando').css('font-size',$ziti+'px')
            $b=$('#backgroud').val();
            if ($b==0){
                $('body').css('background-color','#E5E4DB')
                $('.textbox').css('background-color','#F6F4EC')
                $('.barList > li').css('background-color','#F6F4EC')
            }
            if ($b==1){
                $('body').css('background-color','#DBEED9')
                $('.textbox').css('background-color','#DBEED9')
                $('.barList > li').css('background-color','#DBEED9')
            }
            if ($b==2){
                $('body').css('background-color','#F1DEBD')
                $('.textbox').css('background-color','#F1DEBD')
                $('.barList > li').css('background-color','#F1DEBD')
            }
            if ($b==3){
                $('body').css('background-color','#FFFFFF')
                $('.textbox').css('background-color','#FFFFFF')
                $('.barList > li').css('background-color','#FFFFFF')
            }
        })()

    })
</script>
    <div class="container">
        <div class="row">
            <div  class="wrapig">
                {{--左边漂浮工具栏--}}
                <div id="leftFloatBar" class="leftFloatBarBtnList col-md-3">
                    <ul class="barList">
                        <li id="linfeng_top">
                            <a id="toggleCatalogPopupBtn" class="directory linfeng_mulu" style="cursor: pointer;" data-user-action="rd001" title="目录">
                                <span class="glyphicon glyphicon-list" style="font-size:30px;"></span>

                            </a>
                        </li>
                        <li>
                            <a id="toggleCatalogPopupBtn" class="directory linfeng_bj"   data-user-action="rd001" title="背景">
                                <span class="glyphicon glyphicon-cog" style="font-size:30px;cursor: pointer"></span>
                            </a>
                        </li>
                        <script>
                            $(function(){
                                $('.linfeng_bj').click(function(){
                                    if ($('#linfengback').css('display')=='none'){
                                        $('#linfengback').css('display','inline')
                                    }else {
                                        $('#linfengback').css('display','none')
                                    }
                                })
                            })
                        </script>

                        <li>
                            <a id="toggleCatalogPopupBtn" class="directory " href="" data-user-action="rd001" title="返回">
                                <span class="glyphicon glyphicon-indent-right" style="font-size:30px;"></span>
                            </a>
                        </li>
                    </ul>

                                <div class="modal-dialog" role="document" style="z-index:1111;position: absolute;top:-31px;left:77px;display: none" id="linfengback">
                                    <div style="font-size:14px;" class="modal-content">
                                        <div class="modal-header">
                                            <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span style="font-size:35px;" aria-hidden="true" id="jax">×</span></button>
                                            {{--//x子关闭--}}
                                            <script>
                                                $(function(){
                                                    $('#jax').click(function(){
                                                        $('#linfengback').css('display','none')
                                                    })
                                                })
                                            </script>
                                            <h3 class="modal-title"  id="myModalLabel"><b>设置:</b></h3>
                                        </div>
                                        <div class="setupList" style="padding-top:10px">
                                            <ul style="margin-left:30px;">
                                                {{--更换主题--}}
                                                <li style="font-size: 14px;margin-bottom: 35px;margin-left:30px;" class="readTheme">
                                                    <span style="position: relative;top:-12px;">阅读主题：</span>
                                                    <a>
                                                        <div class="defaultBg" id="moren" style="cursor: pointer;margin-left:20px;width: 40px;height: 40px;border-radius: 50%;background-color:#E5E4DB;display: inline-block;box-shadow: 0 2px 1px #BBB;">
                                                            <input type="hidden" value="0">
                                                        </div>
                                                    </a>
                                                    <a>
                                                        <div class="defaultBg" id="lv" style="cursor: pointer;margin-left:20px;width: 40px;height: 40px;border-radius: 50%;background-color:#DBEED9;display: inline-block;box-shadow: 0 2px 1px #BBB;">
                                                            <input type="hidden" value="1">
                                                        </div>
                                                    </a>
                                                    <a>
                                                        <div class="defaultBg" id="huang" style="cursor: pointer;margin-left:20px;width: 40px;height: 40px;border-radius: 50%;background-color:#F1DEBD;display: inline-block;box-shadow: 0 2px 1px #BBB;">
                                                            <input type="hidden" value="2">
                                                        </div>
                                                    </a>
                                                    <a>
                                                        <div class="defaultBg" id="bai" style="cursor: pointer;margin-left:20px;width: 40px;height: 40px;border-radius: 50%;background-color:#FFFFFF;display: inline-block;box-shadow: 0 2px 1px #BBB;">
                                                            <input type="hidden" value="3">
                                                        </div>
                                                    </a>
                                                </li>
                                                <script>
                                                    $(function(){
                                                        $('#lv').click(function(){
                                                            $('body').css('background-color','#DBEED9')
                                                            $('.textbox').css('background-color','#DBEED9')
                                                            $('.barList > li').css('background-color','#DBEED9')
                                                            $color=$('#lv').children('input').val();
                                                            $.ajax({
                                                                url:"{{url('home/color/back')}}",
                                                                data:'color='+$color,
                                                                type:'get',
                                                                success:function (data) {
                                                                    if (data==222){
                                                                        alert('出错啦请联系管理员')
                                                                    }
                                                                },
                                                                error:function(){
                                                                    alert('出错啦请联系管理员')
                                                                },
                                                                datatype:'text'
                                                            })
                                                        })
                                                        $('#moren').click(function(){
                                                            $('body').css('background-color','#E5E4DB')
                                                            $('.textbox').css('background-color','#F6F4EC')
                                                            $('.barList > li').css('background-color','#F6F4EC')
                                                            $color=$('#moren').children('input').val();
                                                            $.ajax({
                                                                url:"{{url('home/color/back')}}",
                                                                data:'color='+$color,
                                                                type:'get',
                                                                success:function (data) {
                                                                    if (data==222){
                                                                        alert('出错啦请先登入')
                                                                    }
                                                                },
                                                                error:function(){
                                                                    alert('出错啦请先登入')
                                                                },
                                                                datatype:'text'
                                                            })
                                                        })
                                                        $('#huang').click(function(){
                                                            $('body').css('background-color','#F1DEBD')
                                                            $('.textbox').css('background-color','#F1DEBD')
                                                            $('.barList > li').css('background-color','#F1DEBD')
                                                            $color=$('#huang').children('input').val();
                                                            $.ajax({
                                                                url:"{{url('home/color/back')}}",
                                                                data:'color='+$color,
                                                                type:'get',
                                                                success:function (data) {
                                                                    if (data==222){
                                                                        alert('出错啦请先登入')
                                                                    }
                                                                },
                                                                error:function(){
                                                                    alert('出错啦请先登入')
                                                                },
                                                                datatype:'text'
                                                            })
                                                        })
                                                        $('#bai').click(function(){
                                                            $('body').css('background-color','#FFFFFF')
                                                            $('.textbox').css('background-color','#FFFFFF')
                                                            $('.barList > li').css('background-color','#FFFFFF')
                                                            $color=$('#bai').children('input').val();
                                                            $.ajax({
                                                                url:"{{url('home/color/back')}}",
                                                                data:'color='+$color,
                                                                type:'get',
                                                                success:function (data) {
                                                                    if (data==222){
                                                                        alert('出错啦请先登入')
                                                                    }
                                                                },
                                                                error:function(){
                                                                    alert('出错啦请先登入')
                                                                },
                                                                datatype:'text'
                                                            })
                                                        })
                                                    })
                                                </script>
                                                {{--修改字体大小--}}
                                                <li style="font-size: 14px;margin-bottom: 35px;margin-left:30px;">
                                                    <span>字体大小:</span>
                                                    <a style="text-align:center;font-size:30px; cursor: pointer" id="zitigo">
                                                        <div class="defaultBg" style="border:1px solid #ccc;margin-left:20px;width: 70px;height: 40px;border-radius: 5px;background-color:#F6F4EC;display: inline-block;box-shadow: 0 2px 1px #BBB;">A-
                                                        </div>
                                                    </a>
                                                    <span style="font-size:30px;border:1px solid #ccc;padding: 4px 20px 0 16px;margin-left: -10px;border-radius: 5px;box-shadow: 0 2px 1px #BBB;" id="newshuzi">
                                                        @if(!empty($ziti))
                                                        {{$ziti}}
                                                            @endif
                                                    </span>
                                                    <a style="text-align:center;font-size:30px; cursor: pointer" id="zitiout">
                                                        <div class="defaultBg" style="border:1px solid #ccc;margin-left:-5px;width: 70px;height: 40px;border-radius: 5px;background-color:#F6F4EC;display: inline-block;box-shadow: 0 2px 1px #BBB;">A+
                                                        </div>
                                                    </a>
                                                </li>
                                                <script>
                                                    $(function(){
//                                                        对字体进行减少
                                                        $('#zitigo').click(function(){
                                                            $newtizi=$('#miando').css('font-size');
                                                            $s= $newtizi.substring(0,$newtizi.length-2)
//                                                            alert($s);
                                                            $s=$s-1;
                                                            $('#miando').css('font-size',$s+'px')
                                                            $newshuzi=$('#newshuzi').html();
                                                            $newshuzi=$newshuzi-1;
                                                            $('#newshuzi').html($newshuzi);
                                                            $.ajax({
                                                                url:"{{url('home/font/size')}}",
                                                                data:'size='+$newshuzi,
                                                                success:function(data){
                                                                    if (data==222){
                                                                        alert('出错啦请先登入')
                                                                    }
                                                                },
                                                                error:function(){
                                                                    alert('出错啦请先登入')
                                                                },
                                                                datatype:'text'
                                                            })
                                                        })
//                                                        对字体进增加
                                                        $('#zitiout').click(function(){
                                                            $newtizi=$('#miando').css('font-size');
                                                            $s= $newtizi.substring(0,$newtizi.length-2)
//                                                            alert($s);
                                                            $s=Number($s)+Number(1);
//
                                                            $('#miando').css('font-size',$s+'px')

                                                            $newshuzi=$('#newshuzi').html();
                                                            $newshuzi=Number($newshuzi)+Number(1);
                                                            $('#newshuzi').html($newshuzi);
                                                            $.ajax({
                                                                url:"{{url('home/font/size')}}",
                                                                data:'size='+$newshuzi,
                                                                success:function(data){
                                                                    if (data==222){
                                                                        alert('出错啦请先登入')
                                                                    }
                                                                },
                                                                error:function(){
                                                                    alert('出错啦请先登入')
                                                                },
                                                                datatype:'text'
                                                            })
                                                        })
                                                    })
                                                </script>
                                                {{--按钮--}}
                                                <li style="padding:20px;text-align:center;margin-bottom:30px;">
                                                    {{--<input style="width:100px;box-shadow: 0 4px 1px #BBB;margin-left:-150px;margin-right:40px;" class="btn btn-success" type="submit" value="保存">--}}
                                                    {{--<input style="width:100px;box-shadow: 0 4px 1px #BBB;" class="btn btn-danger" type="submit" value="取消">--}}
                                                </li>
                                            </ul>
                                        </div>
                                    </div>
                                </div>

                </div>
                {{--中间部分--}}
                @if($alert)
                    {!! $alert !!}
                    @endif
                <div id="readWrap" class="readWrap w800 col-md-6">
                    <div class="bookNav"><a href="{{url('home/index')}}" target="_blank">人生书屋首页</a>&gt;
                        <a href="" target="_blank">@if($cid==1)
                                玄幻
                            @elseif($cid==2)
                                科幻
                            @elseif($cid==3)
                                都市
                            @elseif($cid==4)
                                军事
                            @elseif($cid==5)
                                末日
                            @elseif($cid==6)
                                武侠
                            @elseif($cid==7)
                                爱情
                            @endif</a>&gt;
                        <a href="{{url('home/message/'.$id)}}">{{$bookname}}</a></div>
                    {{--章节内容--}}
                    {{--第一页--}}
                    <div class="linfeng_one" style="" id="juan">
                        <input type="hidden" value="{{$id}}" id="bid">
                        {{--@foreach($rolls as $k)--}}
                        <div >
                            <ul class="linfneg_left " >

                            </ul>
                        </div>
                        {{--@endforeach--}}
                    </div>
                    @foreach($text as $k)
                    <div class="chaptercontainer">
                        <div class="textbox">
                            <div class="story_title">
                                <h1 data-node="chapterTitle">第{{$k->rolls}}卷</h1>
                                <p class="textinfo">
                                    <h2>第<a class="story" target="_blank" href="">{{$k->zhongshu}}章:{{$k->chaptersname}}</a></h2>
                                    作者：<a class="author" target="_blank" href="">{{$writername}}</a>
                                    <span>字数：<?php
                                        $s=$k->site;
                                        echo mb_strlen($s, 'UTF-8');
                                        ?>
                                    </span>
                                    <span>更新时间：{{date('Y-m-d',$k->addtime)}}</span>
                                </p>
                            </div>
                            <div class="txtwrap">
                                <div class="text">
                                    <div class="bookreadercontent">
                                        <p style="text-indent" id="miando">

                                            @if(isset($free))
                                                请购买此章节
                                                @else
{{--                                            {{$k->site}}--}}
                                                {!! $k->site !!}
                                                @endif
                                        </p>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                {{--右边工具栏--}}
                <div id="rightFloatBar" class="rightFloatBarBtnList col-md-3">
                    <ul class="barList">
                        <li>
                            <a id="toggleCatalogPopupBtn" class="directory " href="{{url('home/article/'.$id.'/top/'.$k->zhongshu)}}" data-user-action="rd001" title="上一章">
                                <span class="glyphicon glyphicon-chevron-up" style="font-size:30px;"></span>
                            </a>
                        </li>
                        <li>
                            <a id="toggleCatalogPopupBtn" class="directory " href="{{url('home/article/'.$id.'/next/'.$k->zhongshu)}}" data-user-action="rd001" title="下一章">
                                <span class="glyphicon glyphicon-chevron-down" style="font-size:30px;"></span>
                            </a>
                        </li>
                    </ul>
                </div>
                @endforeach
            </div>
        </div>
    </div>

    {{--          聊天框开始           --}}
    <meta name="_token" content="{!! csrf_token() !!}"/>
    <input type="hidden" value="{{session('readid')}}" id="readid">
    <input type="hidden" value="{{$bookname}}" id="bookname">
    <input type="hidden" value="{{session('readname')}}" id="readname">
    <div class="liao">
        <div class="liaotianli">
            <input type="hidden" value="0">
            <ul class="newli">

            </ul>
        </div>
        <div class="tijiao">
            @if(session('readid'))
        <div class="container-fluid">
            <div class="row">
                <div class="col-lg-12">
                    <div class="input-group">
                        <input type="text" id="text" class="form-control" placeholder="畅所欲言吧!">
                        <span class="input-group-btn">
            <button class="btn btn-default" id="liaotiango" type="button">Go!</button>
             </span>
                    </div><!-- /input-group -->
                </div><!-- /.col-lg-6 -->
            </div><!-- /.row -->
         </div>
            @else
            <h3>请登入再发表</h3>
                @endif
        </div>
    </div>
    <div class="liaotian">
        <div class="liaotianson">聊天区</div>
    </div>
    <script>
        $(function(){

            (function() {
                setInterval(function(){
                $bid = $('#bid').val();
                $readname=$('#readname').val();
                    if ($('.newli input:last').val()){
                        $mixid=$('.newli input:last').val()
                    }else{
                        $mixid=0;
                    }
                    if ($('#newchatid').val()){
                        $newchatid=$('#newchatid').val();
                    }else{
                        $newchatid=0;
                    }
                $.ajax({
                    url: "{{url('home/read/chat')}}",
                    data: 'bid=' + $bid+'&mixid='+$mixid+'&newchatid='+$newchatid,
                    type: 'get',
                    success: function (data) {
                        eval('$add=' + data)
                        for (var i = 0; i < $add.length; i++) {
                            if($add[i].readname==$readname){
                                $name='我';
                            }else{
                                $name=$add[i].readname;
                            }
                            $('.newli').append('<li>' + $add[i].date+$name+':'+ $add[i].text + '</li> <input type="hidden" value="'+$add[i].id+'">')
                        }
                    },
                    {{--headers: {--}}
                            {{--                        'X-CSRF-TOKEN' : '{{ csrf_token() }}',--}}
                            {{--'X-CSRF-TOKEN': $('meta[name="_token"]').attr('content')--}}
                            {{--},--}}
                    error: function () {
//                        alert('错误!')
                    },
                    datatype: 'json'
                })
            },500)
            })()

            $('.liaotian').click(function(){

                if ($('.liao').css('display')=='none'){
                    $('.liao').css('display','inline')
                }else{
                    $('.liao').css('display','none')
                }

            })
            $('#liaotiango').click(function(){
                $rid=$('#readid').val();
                $readname=$('#readname').val();
                $bid=$('#bid').val();
                $bookname=$('#bookname').val();
                $text=$('#text').val();
                $('#text').val('')
                $.ajax({
                    url:"{{url('home/read/chat')}}",
                    type:'post',
                    data:'rid='+$rid+'&bid='+$bid+'&text='+$text+'&readname='+$readname+'&bookname='+$bookname,
                    success:function(data){
                        $('.liaotianli input:first-child').replaceWith('<input type="hidden" value="'+data+'" id="newchatid">')
//                        newchatid=data;
                    },
                    headers: {
{{--                        'X-CSRF-TOKEN' : '{{ csrf_token() }}',--}}
                        'X-CSRF-TOKEN': $('meta[name="_token"]').attr('content')
                    },
                    error:function(){
                        alert('错误!')
                    },
                    datatype:'text'
                })
            })
        })
    </script>
    {{--           聊天框结束              --}}

    {{--书卷选择书章--}}
    <script>
        $(function(){
            $('.linfeng_mulu').click(function(){
                if ( $('.linfeng_one').css('display')=='none'){
                    $('#linfeng_top').css('background-color','white')
                    $('.linfeng_one').css('display','inline')
                }else {
                    $('#linfeng_top').css('background-color','')
                    $('.linfeng_one').css('display','none')
                }
                })
            $(window).scroll( function (){
                var  h_num=$(window).scrollTop();
                if (h_num>90){
                    $('.linfeng_one').addClass( 'fixer');
                    $( '.barList' ).addClass( 'fixer' );
                } else {
                
                    $('.linfeng_one').removeClass( 'fixer' );
                    $( '.barList' ).removeClass( 'fixer' );
                }
            });
            $(this).on('click','.glyphicon-list',function(){
//                alert(1)
//                $rid=$(this).children('input').val();
                $bid=$('#bid').val()
//                alert($bid)
                $.ajax({
                    url:"{{url('home/articlelist')}}",

                    data:'bid='+$bid,
                    type:'get',
                    success:function(data){
                        $su=$.makeArray(data);
                        eval('$on='+$su);
                        for (var i=0;i<$on.length;i++){
                            $('.linfneg_left').empty()
                            $('.linfneg_left').after('<a href="{{url('home/message/into/')}}/'+$bid+'\/0\/'+$on[i].zhongshu+'") !!}"><li class="linfenggo"><span class="linfenggg">第:'+$on[i].zhongshu+'章'+$on[i].chaptersname+'</span></li></a>')
                        }
                    },
                    error:function () {
                        alert('失败');
                    },
                    datatype:'json'
                })
            })
        })
    </script>


</body>
</html>